<template>
	<view class="bgIndex " :style="{ '--bg-image': `url(${daziBg1})` }">
		<!-- <view :style="{ height: heightSystemss*2 + 'rpx' }"></view> -->
		<view class="padding_20rpx">
			<!-- 		<sunui-navbar v-if="tabList.length>=1" :items="tabList" lineHeight="70rpx" :isCenter="false"
				:currentIndex="currentIndex" padding="12rpx" activeColor="#000000" :size="65" activeLineBg="#785DF6"
				textAlign="center" activeLineWidth="100%" activeDirection="space-between" activeLineHeight="6rpx"
				bgColor="transparent" :margin="10" @change="e=>getChange(e,tabList[e].id)"></sunui-navbar> -->
			<!-- 搜索框 -->
			<view class="search-content margin-top_10rpx">
				<image class="address-img" :src="dw" mode=""></image>
				<text>{{userInfo.city_name}}</text>
				<text style="margin-left: 20rpx;color:rgb(224 218 218);">|</text>
				<image class="search-img" :src="search" mode=""></image>
				<input placeholder="请搜索用户名称" v-model="searchVal" @input="changeInput"
					style="width: auto;line-height: 1em; " placeholder-style="font-size:28rpx;color:#A1A1A1;" />

			</view>
			<liu-slide-img :list="listPoster" :autoplay="autoplay" :interval="interval"
				@click="clickSlideImg"></liu-slide-img>

			<view class="flex-between margin-top_40rpx margin-bottom_20rpx">
				<view class="flex-align-center">
					<view class=" line">

					</view>
					<view class="font-weight">
						最新推荐
					</view>
				</view>
				<view class="switchList flex-around" style="color: rgb(125, 93, 255);">
					<view :class="switchListIndex==index?'active-bg flex':'flex active-bgs' "
						v-for="(item,index) in switchList" :key="index" @click.stop="switchListFn(index)">
						<text>{{item.name}}</text>
					</view>
				</view>
			</view>
			<view class="" v-if="switchListIndex==0">
				<mescroll-body ref="mescrollRef" :height="windowHeight+'rpx'" @init="mescrollInit" @down="downCallback"
					@up="upCallback" :up="upOption" :down="downOption">
					<view class="">
						<view style="" class="recommendationList" v-for="(item,index) in list " :key="index"
							@click.stop="userInfoFn(item)">
							<view class="flex-start">
								<view class="">
									<image class="avatar" :src="item.avatar" mode=""></image>
								</view>
								<view class="" >
									<view class="">
										<view class="margin-bottom_10rpx">
											<view class="flex-start-center ">

												<view class="font-weight font-overflow" style="max-width: 310rpx;">
													{{item.nickname}}
												</view>
												<view class="">
													<view v-if="item.level_id==1" class="">
														<image class="noVip"
															src="https://z4a.net/images/2024/07/17/-1617.png"
															mode="widthFix">
														</image>
													</view>
													<view class="" v-else>
														<image class="Vip"
															src="https://z4a.net/images/2024/07/17/-1134.png"
															mode="widthFix">
														</image>
													</view>
												</view>

											</view>

										</view>
										<view class="margin-bottom_10rpx">
											<view class="flex-start-center" style="color: #666666;">
												<view v-if="item.sex==2" class=" ">
													<view class="genderBtn flex">

														<image class="genderImg" :src="path69" mode="widthFix"></image>


													</view>

												</view>
												<view v-if="item.sex==1" class=" ">
													<view class="boyBtn flex">
														<image class="genderImg" :src="path25" mode="widthFix"></image>


													</view>


												</view>
												<view class="margin-left_10rpx flex-start-center">
													<view class="flex">
														<text>{{item.age}}岁</text>
													</view>
													<view class=" lines">

													</view>
													<view class="flex">
														<text>{{item.height}}</text>
													</view>
													<view class=" lines">

													</view>
													<view class="flex">
														<text>{{item.city_name?item.city_name:'无'}}</text>
													</view>
													<view class=" lines">

													</view>
													<view class="flex">
														<text>{{1000}}km</text>
													</view>
												</view>
												<view class="">

												</view>


											</view>

										</view>

									</view>
									<view class="margin-bottom_20rpx" style="color: #999999;">
										<text>{{item.introduce}}</text>
									</view>
									<view class="">
										<scroll-view @scrolltolower="nextPage" scroll-view scroll-with-animation='true'
											class="scroll-view_H" scroll-x="true">
											<view id="im_0" class="bottom"></view>
											<block v-for="(item,index) in item.img" :key="index">
												<view class="scroll-view-item_H  flex-column" @click="imgScareArr(item.img,2)">
													<image class="albumIcon" :src="item" mode="aspectFill"></image>
										
												</view>
										
											</block>
										
										</scroll-view>
									</view>
								</view>
							
							</view>

							<!-- <view class="location">

								<image class="iconImg" :src="item.cover_image?item.cover_image:'http://yunhunjian123.oss-cn-shanghai.aliyuncs.com/2024-06-11/1b5f0202406111537307450.png'" mode="aspectFill"></image>
								<view v-if="item.sex==2" class="genderBtn flex">

									<image class="genderImg" :src="path69" mode=""></image>

									<text >{{item.age}}</text>
								</view>

								<view v-if="item.sex==1" class="boyBtn flex">
									<image class="genderImg" :src="path25" mode=""></image>


									<text >{{item.age}}</text>
								</view>
								<view class="addressBtn flex">
									<image class="addressImg" :src="pathss" mode=""></image>
									<text style="margin-bottom: 6rpx;">{{item.city_name}}</text>
								</view>
								<view class="heightBtn ">
									<text>{{item.height}}cm</text>
								</view>
							</view>
							<view class="font-overflow2">
								{{item.introduce}}
							</view>
							<view class="flex-start-center margin-top_10rpx">
								<image class="avatar" :src="item.avatar" mode=""></image>
								<text>{{item.nickname}}</text>
							</view> -->
						</view>


					</view>
				</mescroll-body>
				<view class="height80">

				</view>
			</view>
			<view class="" v-if="switchListIndex==1">
				<map style="width: 100%; height: 90vh;" :layer-style='5' :style="{height:mapheight}"
					:show-location='true' :latitude="form.dimension" :longitude="form.longitude" :markers="marker"
					:scale="scale" @markertap="markertap" @callouttap='callouttap'>

				</map>

			</view>
		</view>
	</view>
</template>

<script>
	export default {
		components: {

		},
		data() {
			return {
				// daziBg1: this.$img.daziBg1,
				search: this.$img.search,
				dw: this.$img.dw,
				path25: this.$img.path25,
				path69: this.$img.path69,
				pathss: this.$img.pathss,
				userInfo: uni.getStorageSync("userInfo"),
				downOption: {
					auto: false
				},
				// 上拉配置项
				upOption: {
					auto: true
				},

				scale: 13, //缩放级别
				bottomData: false,
				marker: [],



				windowHeight: 0,
				switchListIndex: 0,
				autoplay: true,
				interval: 3000,
				listPoster: [],
				heightSystemss: 0,
				currentIndex: 0,
				list: [],
				tabList: [{
						name: '搭子',
						id: '1' //null
					}, {
						name: '圈子',
						id: '2' //null
					},

					{
						name: '服务',
						id: '3' //null
					},
					{
						name: '社交',
						id: '4' //null
					},
					{
						name: '关注',
						id: '5' //null
					},
					{
						name: '社群',
						id: '6' //null
					},

				],
				switchList: [{
					name: '列表'
				}, {
					name: '地图'
				}],
				form: {
					dimension: uni.getStorageSync("userInfo").dimension,
					longitude: uni.getStorageSync("userInfo").longitude,
					distance: 200000
				},
				userInfoObject: {},
				searchVal: ''

			}
		},
		onLoad() {
			// this.createdgetSystemInfo()
			this.init()

		},
		created() {
			// this.createdgetSystemInfo()
			this.init()
		},
		onShow() {
			this.$nextTick(() => {
				this.mescroll?.resetUpScroll();
			})
		},
		computed: {
			mapheight() {
				let data = ''
				if (this.bottomData) {
					if (this.upTop) {
						data = '50px'
					} else {
						data = '200px'
					}
				} else {
					data = '90vh'
				}
				return data
			},
			coverbottom() {
				let data = ''
				if (this.bottomData) {
					data = '20rpx'
				} else {
					data = '100rpx'
				}
				return data
			}
		},

		methods: {
			changeInput(e) {
				console.log(e)
				this.searchVal = e.detail.value
				this.mescroll?.resetUpScroll();
			},
			markertap(e) {
				console.log("===你点击了标记点===", e)
			},
			//地图点击事件
			callouttap(e) {
				console.log('地图点击事件', e)

				this.$sun.navGo('/pagesB/index/socialDetails', {
					uid: e.detail.markerId
				})
			},
			userInfoFn(item) {
				this.$sun.navGo('/pagesB/index/socialDetails', {
					uid: item.id
				})
			},
			async upCallback(scroll) {

				const result = await this.$http.post({
					url: this.$api.userList,
					data: {
						page: scroll.num,
						limit: 100,
						name: this.searchVal,
						id: this.userInfo.id,




					},
					headers: {
						'Authorization': this.userInfo.token
					}

				})


				if (result.code == 0) {

					this.mescroll.endByPage(result.data.list.length, this.$sun.pagingSum(result.data.count, 10));
					if (scroll.num == 1) this.list = [];

					this.list = this.list.concat(result.data.list);

					uni.setStorageSync('socialList', this.list);

					// 		this.list.forEach((item) => {

					// 			item.labelList = item.label.split(",")
					// 		})

					this.list.forEach((item) => {
						if (item.img && item.img.includes(',')) {

							// 包含的进行slice(',') 分割

							item.img = item.img.split(',').map((items) => items.trim());
						} else {
							if (item.img && item.img.length) {
								item.img = item.img.split().map((items) => items.trim());
							} else {
								item.img = []
							}



						}
					})

					console.log('this.list', this.list, this.list.length);
				} else {
					this.$sun.toast(result.message, 'none')
				}


			},
			// 点击轮播图
			clickSlideImg(e) {
				// 跳本地 ， 2 跳h5 ，3 跳小程序
				if (e.jump_way == 1) {
					this.$sun.toast('目前暂不支持本地跳转', 'none')
				} else if (e.jump_way == 2) {
					window.location.href = e.link
				}

			},
			// 获取轮播图
			async init() {
				const resPoster = await this.$http.post({
					url: this.$api.poster,
					data: {

						type: 4

					},
					headers: {
						// 'Authorization': `Bearer ${this.token}`
					}

				})

				if (resPoster.code == 0) {




					// 	// 展示区域  1 首页 2 商城 3 套餐卡市场 这里还需要区分

					this.listPoster = resPoster.data.filter(item => item.type == 4);
					console.log(this.listPoster)




				} else {

					this.$sun.toast(resPoster.messgae, 'none')
				}



			},
			createdgetSystemInfo() {
				let menuButtonObject = uni.getMenuButtonBoundingClientRect(); //获取菜单按钮（右上角胶囊按钮）的布局位置信息。坐标信息以屏幕左上角为原点。
				uni.getSystemInfo({
					//获取系统信息
					success: res => {
						let navHeight = menuButtonObject.height + (menuButtonObject.top - res
							.statusBarHeight) * 2; //导航栏高度=菜单按钮高度+（菜单按钮与顶部距离-状态栏高度）*2
						this.heightSystemss = navHeight;
					},
					fail(err) {
						console.log(err);
					}
				});
			},
			switchListFn(i) {
				this.switchListIndex = i
				if (this.switchListIndex == 1) {
					this.userInfoFns()
				}

			},
			async userInfoFns() {
				const res = await this.$http.post({
					url: this.$api.userInfo,
					data: {



					},
					headers: {
						'Authorization': this.userInfo.token
					}

				})

				if (res.code == 0) {

					this.userInfoObject = res.data


					this.form.dimension = this.userInfoObject.dimension
					this.form.longitude = this.userInfoObject.longitude
					// this.$sun.assignObject(this.form, {
					// 	...this.userInfoObject
					// })
					console.log(res.data)
					this.nearUser()

				} else {

					this.$sun.toast(resPoster.message, 'none')
				}
			},
			async nearUser() {
				const resPoster = await this.$http.post({
					url: this.$api.nearUser,
					data: {

						...this.form

					},
					headers: {
						'Authorization': this.userInfo.token
					}

				})

				if (resPoster.code == 0) {

					console.log(resPoster.data)
					this.marker = resPoster.data.list.map((item, index) => {
						return {
							id: item.id,
							latitude: item.dimension, //纬度
							longitude: item.longitude, //经度
							iconPath: item.avatar, //显示的图标        
							rotate: 0, // 旋转度数
							width: 50, //宽
							height: 50, //高
							//   title:'我在这里',//标注点名
							alpha: 0.5, //透明度
							callout: { //自定义标记点上方的气泡窗口 点击有效  
								content: item.nickname, //文本
								color: '#000000', //文字颜色
								fontSize: 14, //文本大小
								borderRadius: 15, //边框圆角
								borderWidth: '10',
								bgColor: '#ffffff', //背景颜色
								display: 'ALWAYS', //常显
							},
						}

					})


				} else {

					this.$sun.toast(resPoster.messgae, 'none')
				}

			}
		}
	}
</script>

<style lang="less" scoped>
	page {
		background: #ffffff;
	}

	.bgIndex {
		background-repeat: no-repeat;
		background-size: cover;
		background-image: (var(--bg-image));
		// background-image: url('https://n8.weijuyunke.com/2024-06-07/55908202406071723493016.png');

		// height: 50vh;
		.map-container {
			position: relative;
			overflow: hidden;

			.cover-view {
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				width: 80rpx;
				height: 80rpx;
				color: #484848;
				background-color: #fff;
				background-size: 120rpx 120rpx;
				background-position: center center;
				position: absolute;
				bottom: 100rpx;
				right: 32rpx;
			}

			.cover-image {
				display: inline-block;
				width: 30rpx;
				height: 30rpx;
			}
		}

		.search-content {

			// justify-content: center;
			display: flex;
			align-items: center;
			padding: 20rpx;
			margin-bottom: 30rpx;
			height: 76rpx;

			background: rgb(246, 248, 255);
			;
			border-radius: 84rpx;


			.search-img {
				width: 30rpx;
				height: 30rpx;
				margin-right: 20rpx;
				margin-left: 20rpx;
			}

			.address-img {
				width: 30rpx;
				height: 30rpx;
				margin-right: 10rpx;
				margin-left: 20rpx;
			}

			.icon_close {
				padding: 0rpx 15rpx;
				width: 36rpx;
				height: 36rpx;
				margin-right: 30rpx;
			}

		}

		.line {
			width: 10rpx;
			height: 30rpx;
			border-radius: 106rpx;
			margin-right: 10rpx;
			background: rgb(120, 93, 246);
		}

		.lines {
			width: 4rpx !important;
			height: 20rpx;
			margin: 0 10rpx;

			background: #999999;
		}

		.recommendationList {
			// width: 352rpx;
			.scroll-view-item {
				height: 300rpx;
				line-height: 300rpx;
				text-align: center;
				font-size: 36rpx;
			}
			.scroll-Y {
				height: 300rpx;
			}
			
			.scroll-view_H {
				white-space: nowrap;
				width: 100%;
				margin-bottom: 20rpx;
			}
			.scroll-view-item_H {
				display: inline-block;
				margin-right: 10rpx;
			
				text-align: center;
				font-size: 36rpx;
			
				.albumIcon {
					width: 216rpx;
					height: 216rpx;
				}
			
				.release {
			
					width: 90rpx;
					height: 40rpx;
					line-height: 36rpx;
					;
					margin: auto;
					font-size: 20rpx;
					border-radius: 4rpx;
					border: 2rpx solid #1E6CEB;
					color: #FFF;
					background: #1E6CEB;
				}
			}
			margin-bottom: 22rpx;

			.avatar {
				margin-right: 8rpx;
				width: 148rpx;
				height: 148rpx;
				border-radius: 20rpx;
			}

			.noVip {
				width: 136rpx;
				height: 40rpx;
				margin-left: 10rpx;
			}

			.Vip {
				width: 136rpx;
				height: 40rpx;
				margin-left: 10rpx;
			}


			// position: relative;

			.heightBtn {
				// position: absolute;
				// right: 14rpx;
				// bottom: 10rpx;
				padding: 0 10rpx;
				color: rgb(255, 236, 242);
				z-index: 999;
			}

			.genderBtn {
				// position: absolute;
				// top: 10rpx;
				// left: 10rpx;
				width: 38rpx;
				height: 38rpx;
				padding: 0 10rpx;
				border-radius: 50%;
				color: rgb(255, 236, 242);
				background: rgb(246, 91, 203);
				;
				z-index: 999;

				.genderImg {
					// margin-right: 10rpx;
					vertical-align: middle;
					width: 15rpx;
					height: 15rpx;
				}

			}

			.boyBtn {
				// position: absolute;
				// top: 10rpx;
				// left: 10rpx;
				width: 38rpx;
				height: 38rpx;
				padding: 0 10rpx;
				border-radius: 100rpx;
				color: rgb(255, 236, 242);
				background: #51A9FF;
				z-index: 999;

				.genderImg {
					// margin-right: 10rpx;
					vertical-align: middle;
					width: 15rpx;
					height: 15rpx;
				}

			}



			.addressBtn {
				position: absolute;

				left: 10rpx;
				bottom: 10rpx;
				height: 34rpx;
				padding: 0 10rpx;
				border-radius: 100rpx;
				color: rgb(255, 236, 242);

				z-index: 999;

				.addressImg {
					margin-right: 10rpx;
					vertical-align: middle;
					width: 18rpx;
					height: 22rpx;
				}

			}

			.iconImg {
				width: 100%;
				height: 480rpx;
			}


		}


		.switchList {
			width: 166rpx;
			height: 60rpx;
			border-radius: 192rpx;
			padding: 5rpx;
			background: rgb(239, 239, 239);

			.active-bg {
				width: 83rpx;
				height: 50rpx;
				border-radius: 192rpx;

				background: rgb(255, 255, 255);
			}

			.active-bgs {
				width: 83rpx;
				height: 50rpx;
				border-radius: 192rpx;

				background: rgb(239, 239, 239);
			}
		}
	}
</style>